<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		
		<meta name="viewport" content="width=640,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/Home.css" />

	</head>

	<body>
		<div class="web">
			<!--**************改动**************start-->
			<audio src="music/1.mp3" autoplay loop=""></audio>
			<div class="music xuanzhuan"></div>
			<!--**************改动**************end-->
			<div class="logo animated flipInX">
				<img src="images/Homg_logo.png" />
			</div>
			<div class="content">
				<!--!!!!!!!!!!增加大字图片!!!!!!!!!!!!!-->
				<img src="images/redwine.png" class="redwine"/>
				<ul>
<!--/********************时间改变***************************/-->
					<li class="animated bounceInLeft delay_100"><img src="images/index_1.png" /></li>
					<li class="animated bounceInLeft delay_400"><img src="images/index_2.png" /></li>
					<li class="animated bounceInLeft delay_700"><img src="images/index_3.png" /></li>
					<li class="animated bounceInLeft delay_700"><img src="images/index_3.png" /></li>
					<li class="animated bounceInLeft delay_1000"><img src="images/index_4.png" /></li>
					<li class="animated bounceInLeft delay_1400"><img src="images/index_5.png" /></li>
					<li class="animated bounceInLeft delay_1700"><img src="images/index_6.png" /></li>
					<li class="animated bounceInLeft delay_2000"><img src="images/index_3.png" /></li>
					<li class="animated bounceInLeft delay_2000"><img src="images/index_3.png" /></li>
					<li class="animated bounceInLeft delay_2400"><img src="images/index_7.png" /></li>
				</ul>
				
			</div>
			<div class="btn">
				<ul>
					<li class="animated button fadeIn delay_1400">定制我的囍宴</li>
					<li class="animated button fadeIn delay_2000">我要免费领取囍酒</li>
				</ul>
<!--/********************时间改变***************************/-->
			</div>
			<div class="mask">
				<div class="rule animated flipInX">
					<ul>
						<!--!!!!!!!!改动的地方 START-->
						<li><button><img src="images/close_icon.jpg"/></button></li>
						<!--!!!!!!!!改动的地方 END-->
						
						<li>定制专属囍宴</li>
						<li>邀请宾客入席</li>
						<li>抢999元现金贺礼!</li>
						<li><button>查看活动规则</button></li>
					</ul>
				</div>
			</div>
			<div class="mask1">
				<div class="wrap">
					<div class="content">
						<!--!!!!!!!!!!!!!!!!活动规则-->
						<ul>
							<li>活动规则</li>
							<li>在活动期间内，参与H5互动，制作自己的囍宴，并分享至朋友圈，邀请更多好友“入座”。6位好友入座即可组成一桌酒席，累计组成酒席最多的前99位用户，将获得999元的现金贺礼。此外，符合参与条件的用户凭结婚证以及酒店婚宴预订单据，可获赠限量婚宴定制囍酒套装一份，线下领取，先到先得。</li>
							<li>参与条件</li>
							<li>于2016年1月1日后进行婚姻登记，并在2016年10月1日—10月7日举办婚宴的新人（限广东省、海南省区域）</li>
							<li>活动时间</li>
							<li>2016年9月8日-9月26日</li>
							<li>奖品设置</li>
							<li>1、第1名至99名，各获得￥999现金贺礼一份；<br /> 2、符合参与条件的用户凭结婚证以及酒店婚宴预订单据，前往张裕白兰地线下兑换点（限广东省、海南省区域）可获赠婚宴定制囍酒套装一份，共9999份，数量有限，领完为止。
							</li>
							<li>活动说明</li>
							<li>1、活动奖品有限，在参与者提交认证资料正确无误的前提下，将按照时间顺序的原则确定获奖名单；<br /> 2、2016年9月30日将在张裕白兰地官方微信、微博平台以及囍宴排行榜公布中奖名单及领奖方式；
								<br /> 3、一个微信ID号只能参与一次；
								<br /> 4、如对本活动规则有任何疑问，活动主办方将会在法律允许的范围内对本活动规则给予必要的说明和解释。
							</li>
						</ul>

					</div>
					<div class="btn">
						<span>马上办囍宴</span>
					</div>
					<div class="bot">
						<button></button>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		//!!!!!!!!!!!!!!!!!将下面所有click改成touchstart
			$(".rule li:first button").on("touchstart", function() {
				$(".mask").css("display", "none");
			})
			$(".web>div.btn li:first").on("touchstart", function() {
				$(".mask").css("display", "block");
			})
			$(".web>div.btn li:last").on("touchstart", function() {
				location.href = "freeOfCharge.html"
			})
			$(".rule li:last button").on("touchstart", function() {
				$(".mask1").css("display", "block");
			})
			$(".mask1 div.btn").on("touchstart", function() {
				location.href = "createBanquet.html";
			})
			$(".mask1 div.bot").on("touchstart", function() {
				$(".mask1").css("display", "none");
				$(".mask").css("display", "none");
			})
			var mu = $(".music");
			var music = $("audio")[0];
			mu.on("touchstart", function() {
				mu.toggleClass("xuanzhuan");
				if(music.paused == false) {
					music.pause();
				} else {
					music.play();
				}
			})
			
		</script>
	</body>

</html>